const arr = [
    { id: 1, bannerUrl: 'banner_1.webp' },
    { id: 1, bannerUrl: 'banner_2.webp' },
    { id: 1, bannerUrl: 'banner_3.webp' },
    { id: 1, bannerUrl: 'banner_4.webp' },
];

let index = 1;
let oUl;
let oOl;
let oDiv;

let oUlLis;
let oOlLis;

let oUlLiWidth;

let count;

let res = true;

setPage();
autoMove();
mouseEnterLeave();
setClick();
hide();

function setPage() {

    //创建标签
    oUl = document.createElement('ul');
    oOl = document.createElement('ol');
    oDiv = document.createElement('div');

    let oUlStr = '';
    let oOlStr = '';

    arr.forEach(function (item, key) {
        oUlStr += key === 0 ? `<li class="active"><img src="../images/${item.bannerUrl}"></li>` : `<li><img src="../images/${item.bannerUrl}"></li>`

        oOlStr += key === 0 ? `<li name="oLis" num="${key}" class="active"></li>` : `<li name="oLis" num="${key}"></li>`;
    })

    oUl.innerHTML = oUlStr;
    oOl.innerHTML = oOlStr;
    oDiv.innerHTML = `<a name="left" href="JavaScript:;"><</a><a name="right" href="JavaScript:;">></a>`

    $('[class="banner"]').append(oUl);
    $('[class="banner"]').append(oOl);
    $('[class="banner"]').append(oDiv);

    //克隆
    oUlLis = oUl.querySelectorAll('li');
    oOlLis = oOl.querySelectorAll('li');

    let lastImg = oUlLis[0].cloneNode(true);
    let firstImg = oUlLis[oUlLis.length - 1].cloneNode(true);

    oUl.append(lastImg);
    oUl.insertBefore(firstImg, oUlLis[0]);

    oUlLiWidth = oUlLis[0].offsetWidth;

    oUl.style.width = (oUlLis.length + 2) * oUlLiWidth + 'px';

    oUl.style.left = -oUlLiWidth + 'px';
}

function autoMove() {
    count = setInterval(function () {
        index++;

        setFocusStyle();
        
        if(res){
            res = false;
        }else {
            return;
        }

        move(oUl, { left: -index * oUlLiWidth }, endLoop);
    }, 3000)
}

function endLoop() {
    if (index === arr.length + 2 - 1) {
        index = 1;
    } else if (index === 0) {
        index = arr.length + 2 - 1 - 1;
    }

    oUl.style.left = -index * oUlLiWidth + 'px';

    res = true;
}

function mouseEnterLeave(){
    $('[class="banner"]').mouseenter(function(){
        clearInterval(count);
    })

    $('[class="banner"]').mouseleave(function(){
        autoMove();
    })
}

function setFocusStyle() {
    oOlLis.forEach(function (item) {
        item.classList.remove('active');
    })

    if (index === arr.length + 2 - 1) {
        oOlLis[0].classList.add('active');
    } else if (index === 0) {
        oOlLis[arr.length - 1].classList.add('active');
    } else {
        oOlLis[index - 1].classList.add('active');
    }
}

function setClick() {
    $('[class="banner"]').click(e => {
        e.target.getAtturbute
        if (e.target.getAttribute('name') === 'left') {
            if(res){
                res = false;
            }else {
                return;
            }
            index--;
            setFocusStyle();
            move(oUl, { left: -index * oUlLiWidth }, endLoop);
        } else if (e.target.getAttribute('name') === 'right') {
            if(res){
                res = false;
            }else {
                return;
            }
            index++;
            setFocusStyle();
            move(oUl, { left: -index * oUlLiWidth }, endLoop);
        } else if (e.target.getAttribute('name') === 'oLis'){
            if(res){
                res = false;
            }else {
                return;
            }
            index = Number(e.target.getAttribute('num')) + 1;
            setFocusStyle();
            move(oUl,{left:-index * oUlLiWidth},endLoop);
        }
    })
}

function hide(){
    window.addEventListener('visibilitychange',function(){
        if(document.visibilityState === 'hidden'){
            clearInterval(count);
        }else if(document.visibilityState === 'visible'){
            autoMove();
        }
    })
}